<template>
    <div>
        <table cellspacing="0" cellpadding="0" >
            <thead>
                <tr>
                    <th>编号</th>
                    <th>商品名</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
           
            <tbody>
                <tr :class="{active:num === index}" @mouseover="active(index)" v-for="(item,index) in goods" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price | showPrice}}</td>
                    <td>
                        <button @click="sub(item)" :disabled ="item.num<=1">-</button>
                        {{item.num}}
                        <button @click="add(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>
            <H2>总价格为:{{totalPrice | showPrice}}</H2>
            <h2>购物车已清空</h2>
        </table>
    </div>
</template>

<script>
export default {
    name:'Shopping',
    data(){
        return{
            num: -1,
            goods:[
            {id:100,name:"剃须刀",price:199,num:8},
            {id:101, name:"保温杯", price:37.5, num:10},
            {id:102, name:"拖把", price:12.8, num:2},
            {id:103, name:"砧板", price:29.9, num:15},
            {id:104, name:"水桶", price:15, num:29},
            {id:105, name:"衣架", price:8, num:9},
            {id:106, name:"花露水", price:19.9, num:15},
            {id:107, name:"毛巾", price:17, num:3},
            {id:108, name:"不锈钢锅", price:88, num:1},
            {id:109, name:"海飞丝洗发水", price:36.8, num:12},
            {id:110, name:"数据线", price:10, num:2},
        ]
        }
        
    },
    methods:{
        active(index){
            this.num = index;
        },
        add(item){
            item.num++;
        },
        sub(item){
            item.num--;
        },
        del(index){
            this.goods.splice(index,1);
        }
    },
    filters:{
        showPrice(price){//过滤器
         return  '¥' + price.toFixed(2);
        }
    },
    computed:{
        totalPrice(){
        var a =    this.goods.reduce(function(prev,item){
                return prev + item.num*item.price
            },0)
            return a;
        }
        
    }
    
}
</script>

<style scoped>
    
   table td {
        border: 1px solid black;
        width: 100px;
            }
    .active{
        background-color: black;
        color: white;
    }
</style>